<template>
  <!--
    1、v-infinite-scroll="scroll" //scroll方法,获取数据
    2、infinite-scroll-disabled //是否禁用无限滚动加载 默认是false
    3、infinite-scroll-delay //节流时延，单位为ms  默认200
    4、infinite-scroll-distance //触发加载的距离阈值，单位为px
    5、infinite-scroll-immediate //是否立即执行加载方法，以防初始状态下内容无法撑满容器。
  -->
  <el-table
      ref="myTable"
      v-loading="loading"
      :data="tableData"
      class="table-common"
      style="overflow: auto;overflow-anchor: none;"
      element-loading-text="加载中..."
      max-height="1500"
      :height="height"
      v-bind="$attrs"
      infinite-scroll-distance="1"
      v-el-table-infinite-scroll="scroll"
      :infinite-scroll-disabled="disabled"
  >
    <template v-for="(item,colIndex) in columns" :key="colIndex">
      <el-table-column
          v-if="item.type==='index'"
          type="index"
          :index="item.index"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
          :align="item.align"
      ></el-table-column>
      <el-table-column
          v-else
          :type="item.type"
          :index="item.index"
          :label="item.label"
          :column-key="item.prop"
          :prop="item.prop"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :sortable="item.sortable"
          :resizable="item.resizable"
          :formatter="item.formatter"
          :show-overflow-tooltip="item.ellipsis"
          :align="item.align"
          :header-align="item.headerAlign"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
      >
        <template #default="scope">
          <slot :index="scope.$index" :name="item.prop" :column="scope.column" :row="scope.row">
            {{ scope.row[scope.column.columnKey]}}
          </slot>
        </template>
      </el-table-column>
    </template>
    <template #empty>
      <el-empty :image-size="80" description="暂无数据"/>
    </template>
  </el-table>
</template>

<script setup>
import { defineProps, useAttrs, ref, computed } from 'vue'
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";

const attrs = useAttrs()
const props = defineProps({
  columns: {
    type: Array,
    required: true,
    default: () => ([])
  },
  tableData: {
    type: Array,
    required: true,
    default: () => ([])
  },
  pagination: {
    type: [Object, Boolean],
    default: () => ({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })
  },
  loading: {
    type: Boolean,
    default: false
  },
})

const height = attrs.height ? attrs.height : 550 // 此属性为自定义高度
const emits = defineEmits(['current-change', 'size-change', 'scroll'])
const myTable = ref()
const disabled = ref(false)
// ============ 分页
const currentChange = (value) => {
  emits('current-change', value)
}
const sizeChange = (value) => {
  emits('size-change', value)
}
const scroll = () => {
  if (disabled.value) return;
  emits('scroll')
}
// 根据传入的数字让表格滚动到指定位置，目前设定列为0
const scrollTo = (val) => {
  myTable.value.scrollTo(0, val)
}
//将方法暴露出去
defineExpose({
  scrollTo
})

</script>

<style lang="less">
.table-common {
  width: 100%;

  --el-table-header-bg-color: #F3F4F7;
  --el-table-header-text-color: #353A42;
  --el-table-row-hover-bg-color: #ebf7ff;
  --el-table-text-color: #535862;
  &.el-table--large {
    .el-table__header-wrapper {
      .el-table__cell {
        padding: 16px 0;
      }
    }
    .el-table__body-wrapper {
      .el-table__cell {
        padding: 15px 0;
      }
    }
  }
}
</style>
